<ix-modal-header
  [requiredRoles]="requiredRoles"
  [title]="'SSH Keypairs' | translate"
  [loading]="isFormLoading()"
></ix-modal-header>

<mat-card>
  <mat-card-content>
    <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
      <ix-fieldset [title]="'SSH Keypair' | translate">
        <div class="help-text" [innerHTML]="keyInstructions"></div>

        <ix-input
          formControlName="name"
          [label]="'Name' | translate"
          [required]="true"
          [tooltip]="tooltips.name | translate"
        ></ix-input>

        <ng-container *ixRequiresRoles="requiredRoles">
          <button
            class="generate-button"
            mat-button
            type="button"
            ixTest="generate-keypair"
            (click)="onGenerateButtonPressed()"
          >
            {{ 'Generate Keypair' | translate }}
          </button>
        </ng-container>

        <ix-textarea
          class="key-text-area"
          formControlName="private_key"
          [label]="'Private Key' | translate"
          [tooltip]="tooltips.privateKey | translate"
          [rows]="5"
        ></ix-textarea>

        <ix-textarea
          class="key-text-area"
          formControlName="public_key"
          [label]="'Public Key' | translate"
          [tooltip]="tooltips.publicKey | translate"
          [rows]="5"
        ></ix-textarea>
      </ix-fieldset>

      <ix-form-actions>
        <button
          *ixRequiresRoles="requiredRoles"
          mat-button
          type="submit"
          color="primary"
          ixTest="save"
          [disabled]="form.invalid || isFormLoading()"
        >
          {{ 'Save' | translate }}
        </button>

        <button
          mat-icon-button
          type="button"
          ixTest="download-actions"
          [matMenuTriggerFor]="keymenu"
          [attr.aria-label]="'Download actions' | translate"
        >
          <ix-icon name="more_vert"></ix-icon>
        </button>
        <mat-menu #keymenu="matMenu">
          <span>
            <button
              mat-menu-item
              type="button"
              ixTest="download-private-key"
              [disabled]="!(canDownloadPrivateKey$ | async)"
              (click)="onDownloadKey('private_key')"
            >
              {{ 'Download Private Key' | translate }}
            </button>
          </span>
          <span>
            <button
              mat-menu-item
              type="button"
              ixTest="download-public-key"
              [disabled]="!(canDownloadPublicKey$ | async)"
              (click)="onDownloadKey('public_key')"
            >
              {{ 'Download Public Key' | translate }}
            </button>
          </span>
        </mat-menu>
      </ix-form-actions>
    </form>
  </mat-card-content>
</mat-card>
